<script setup>
const props = defineProps({
  // 传入的参数
  value: {
    type: String,
    default: '', // 默认值 '' || desc || asc
  },
});

const emits = defineEmits([
  'change',
  'update:value',
]);

function onClick() {
  emits('change', props.value === 'asc' ? 'desc' : 'acs');
  emits('update:value', props.value === 'asc' ? 'desc' : 'acs');
}

</script>

<template>
  <div
    class="sort-button"
    @click="onClick"
  >
    <slot />
    <span class="caret-wrapper">
      <CaretTop class="care-top" :class="{ active: props.value === 'asc' }" />
      <CaretBottom class="care-bottom" :class="{ active: props.value === 'desc' }" />
    </span>
  </div>
</template>

<style scoped lang='scss'>
.sort-button {
    padding: 8px 24px;
    background-color: #ffffff;
    outline: 1px solid #e4e4e4;
    color: #999;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 2px;
    &:hover {
      background-color: $green;
      color: #fff;
    }
    .caret-wrapper {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      .care-top {
        position: absolute;
        width: 10px;
        height: 10px;
        top: -8px;
        &.active {
          background-color: $green;
        }
      }
      .care-bottom {
        position: absolute;
        width: 10px;
        height: 10px;
        bottom: -8px;
        &.active {
          background-color: $green;
        }
      }
    }
  }
</style>
